Css3屬性比css 2強很多。增加了很多新的屬性，今天重點介紹開發中會用到的css3屬于。

　　1、 css3媒體查詢，是開發自適應網站的必備。

　　常規寫法：

　　@media (min-width: 700px) { 選擇器 { 樣式 } }

　　@media mediatype and | not | only (media feature) {}

　　2、 布局方式使用彈性盒子

　　寫法：

　　Display:flex

　　justify-content: flex-start | flex-end | center | space-between | space-around;

　　align-items: flex-start | flex-end | center | baseline | stretch;

　　flex-direction: row | row-reverse | column | column-reverse;

　　flex-wrap: nowrap | wrap | wrap-reverse;

　　align-content: flex-start | flex-end | center | space-between | space-around | stretch;

　　flex-flow:||;

　　align-self: auto | flex-start | flex-end | center | baseline | stretch;

　　3、 偽類選擇器

　　:first-child選擇父元素里邊的第一個子元素

　　:last-child選擇父元素里邊的最后一個子元素

　　:nth-child(n)選擇父元素里邊第n個子元素

　　:nth-last-child(n)選擇父元素里邊倒數第n個子元素

　　:nth-of-type(n)

　　：nth-last-of-type(n)

　　:first-of-type

　　:last-of-type

　　：only-child

　　：only-of-type

　　：empty

　　::before

　　::after

　　::selection

　　::first-letter

　　::first-line

　　4、 動畫屬性

　　透明度 opacity: 0.5;

　　(transition)過渡樣式屬性

　　過渡屬性

　　transition: all 2s linear 1s;

　　all所有能過渡屬性都過渡，具體屬性名如：width：只有width有過渡。數字+s秒

　　transition-property: width;

　　規定應用過渡的 CSS 屬性的名稱

　　花費時間

　　transition-duration: 1s;

　　定義過渡效果花費的時間，默認是 0

　　時間曲線

　　transition-timing-function:linear;

　　過渡效果的時間曲線，默認是 "ease"

　　何時開始

　　transition-delay: 2s;

　　規定過渡效果何時開始，默認是 0

　　注意點：

　　1、過渡需要：默認狀態 和hover狀態樣式不同，才能有過渡效果

　　2、transition屬性給需要過渡的元素本身加

　　3、transition屬性設置在不同狀態中，效果不同

　　①、給默認狀態設置，鼠標移入移出都有過渡效果

　　②、給hover設置狀態，鼠標移入有過渡效果，移出沒有過渡效果

　　(transform)平面2D 轉換樣式屬性

　　transform：translate;

　　旋轉

　　transform：rotate(角度);

　　指定對象的2D rotation(2D旋轉)，角度單位是(deg)，需先有transform-origin屬性的定義

　　旋轉中心

　　transform-origin：

　　默認圓點是盒子中心點(原點水平位置,原點垂直位置)允許您改變被轉換元素的位置(即是參考點)

　　旋轉取值

　　left,right,top,bottom,

　　center

　　旋轉transform-origin屬性取值(單位可以寫像素，也可以寫百分比)

　　縮放

　　transform：scale;

　　指定對象的2D scale(2D縮放)，第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認取第一個參數的值

　　平面轉換：

　　1、改變盒子在平面內的形態(位移、旋轉、縮放)

　　2、2D轉換：①、 移動 translate ②、 旋轉 rotate ③、縮放 scale

　　備注：旋轉角度單位是(deg) 旋轉需要加過渡效果

　　(transform)3D空間轉換轉換樣式屬性

　　transform: translate3d(x,y,z);

　　在translate2D的基礎上增加z軸方向上的維度translateX(n),translateY(n)，translateZ(n)

　　旋轉transform: rotate3d(x,y,z,deg);

　　3D呈現

　　transform-style: preserve-3d;

　　縮放

　　transform：scale3d(x,y,z);空間縮放效果scaleY(倍數), scaleZ(倍數),scaleX(倍數)

　　3D轉換：

　　①、移動 translate3d ②、透視perspective ③、旋轉rotate3d ④、3D呈現transfrom-style

　　備注：透視 perspective寫在父元素上(近大遠小)

　　3D呈現transform-style: preserve-3d; 寫給父級

　　(animation)動畫樣式屬性

　　定義動畫@keyframes

　　動畫屬性animation

　　動畫名稱animation-name

　　時間周期animation-duration

　　速度曲線animation-timing-function

　　規定動畫的速度曲線，默認是"ease"。勻速：linear

　　動畫開始animation-delay

　　播放次數animation-iteration-count

　　逆向播放animation-direction